# 介绍

Rsdoctor 是一款为 [Rspack](https://rspack.rs/) 生态量身打造的构建分析工具，同时也完全兼容 [webpack](https://webpack.js.org/) 生态。

Rsdoctor 致力于成为一站式、智能化的构建分析工具，通过可视化与智能分析，使整个构建流程变得透明、可预测和可优化，从而帮助开发团队精准定位瓶颈、优化性能并提升工程质量。

Rsdoctor 支持所有基于 Rspack 或 webpack 的工具和框架，例如：[Docusaurus](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-rsdoctor)、[Rspeedy (Lynx)](https://lynxjs.org/rspeedy/)、[Storybook](https://github.com/rspack-contrib/storybook-rsbuild)、[Next.js](https://nextjs.org/)、[Nuxt](https://nuxt.com/)、[Re.Pack](https://re-pack.dev/)、[Modern.js](https://modernjs.dev/)、[Rsbuild](https://rsbuild.rs/)、[Rspress](https://rspress.rs/) 和 [Rslib](https://rslib.rs/) 等。

<video
  src="https://assets.rspack.rs/others/assets/rsdoctor/rsdoctor-1.0-ui.mp4"
  style={{
    width: '100%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
  autoPlay={true}
  muted={true}
  controls={true}
  loop={true}
  playsInline
/>

## 🔥 特性

- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发者查看构建问题。
- **多种分析能力**：支持构建产物、构建时分析能力：
  - 构建产物支持资源列表及模块依赖等。
  - 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。
  - 构建规则支持重复包检测及 ES Version Check 检查等。
- **支持自定义规则**：除了内置构建扫描规则外，还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。

## 🛠️ 功能介绍

### ⭐️ 概览

- 概览页（即首页）能够知道**项目配置、诊断信息、编译信息、产物情况**。

![Overall](https://assets.rspack.rs/others/assets/rsdoctor/project-overall-1.jpg)

- 除了有项目概览之外，我们还提供了诊断模块，分别是编译诊断、重复包诊断等。如果你的编译、产物命中了我们定义的诊断规则，就会在工具首页出现对应的警示模块, **其中重复包可以查看到详细的引用路径**:

![Overall-Alerts](https://assets.rspack.rs/others/assets/rsdoctor/overall-alerts.png)

### ⭐️ 编译分析

面向 **Loaders、Plugins、Module Resolve** 提供了对应的数据与分析功能，来帮助你分析编译过程上的问题。

#### Loader 分析

- 该模块主要提供了 **Rspack 或 webpack 的 Loaders** 内的输入输出、预估耗时、参数等数据分析的功能。

  <img
    src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-overall.png"
    style={{ margin: 'auto' }}
  />
  <img
    src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png"
    style={{ margin: 'auto' }}
  />

#### Plugin 分析

- 该模块主要拦截并收集了 Plugins 的调用次数、预估耗时等数据信息。

<p>
  <img
    alt="bundle"
    src={'https://assets.rspack.rs/others/assets/rsdoctor/compile-plugin.jpg'}
    width="600px"
    style={{ margin: 'auto' }}
  />
</p>

#### Resolve 分析

- 该模块主要提供了项目内部单个文件中模块解析的路径数据以及预估耗时。Rspack 暂时未支持该模块。

<p>
  <img
    alt="bundle"
    src={'https://assets.rspack.rs/others/assets/rsdoctor/resolver.png'}
    width="700px"
    style={{ margin: 'auto' }}
  />
</p>

### ⭐️ 产物分析

- 我们在「Bundle Size」模块中，可以看到当前项目的产物数据信息概览，以及分析重复包引入的体积与原因。

- 此外，我们还可以通过「Bundle Analysis」 模块来进一步分析当前产物中产物与模块关系，体积数据等信息以及模块引入的原因。

<p>
  <img
    alt="bundle"
    src={
      'https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png'
    }
    width="700px"
    style={{ margin: 'auto' }}
  />
</p>

### ⭐️ Bundle diff

::: tip
功能支持中...
:::

使用 Rsdoctor 提供的 Bundle Diff 功能，可以看到产物内的资源体积、重复包、Packages 等数据的变化以及每个资源中的模块文件的大小及代码的变化。

| ![bundle-diff-1](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-2.png) | ![bundle-diff-2](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-1.png) |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |

## 🧑‍💻 社区

欢迎加入我们的 [Discord](https://discord.gg/wrBPBT6rkM) 交流频道！Rstack 团队和用户都在那里活跃，并且我们一直期待着各种贡献。

你也可以加入 [飞书群](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=3c3vca77-bfc0-4ef5-b62b-9c5c9c92f1b4) 与大家一起交流。
